<template>
    <div>
        <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
            <template v-if="textCss['null-value']">
                <div :class="textCss"><pre>{{svalue}}</pre></div>
            </template>
            <template v-else>
                <div :class="textCss">
                    <span class="color_block" :style="{backgroundColor: svalue}"></span>
                    <span class="color_values">{{svalue}}</span>
                </div>
            </template>
        </el-form-item>
    </div>
</template>

<script>

import { objectAssign } from "../../utils/common";

export default {
    name: "PopoTextView",
    props: {
        value: { type : [String, Number, Boolean, Array]},
        item: {type: Object },
    },
    data() {
        return {
            mvalue: this.value,
            opt: {},
            nullValue: "[未设置]",
            textCss: { "text-viewer-box":true, "null-value": false},
        };
    },
    computed:{
        svalue(){
            if( this.mvalue === null || this.mvalue === undefined){
                this.textCss[ "null-value"] = true;
                return this.nullValue;
            }

            return this.mvalue;
        },
    },
    created(){
        var viewProps = this.item.viewProps || {};
        this.nullValue = viewProps.nullValue || this.nullValue;
    },
    methods: {}
};
</script>


<style scoped lang="scss">
@import "../../css/view_base";

::v-deep{ }

.color_block{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.color_values{
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    font-size: 12px;
}
</style>
